<template>
  <!-- 库存总货量金额 -->
  <div id="TotalInventoryAmountcontentId" class="TotalInventoryAmountcontent" />
</template>

<script>
import tools from "@/utils/tools"; //引入tools.js
import { getInventoryTotal } from "@/api/user";
import * as echarts from "echarts/core";
import {
  GridComponent,
  LegendComponent,
  TooltipComponent,
} from "echarts/components";
import { PictorialBarChart, BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  GridComponent,
  LegendComponent,
  PictorialBarChart,
  BarChart,
  CanvasRenderer,
  TooltipComponent,
]);
export default {
  name: "TotalInventoryAmount",
  data() {
    return {};
  },
  mounted() {
    this.getInventoryTotal();
  },
  beforeDestroy() {},
  methods: {
    async getInventoryTotal() {
      const res = await getInventoryTotal();
      if (res.code === 200) {
        const nameList = [];
        const moneyList = [];
        const countList = [];
        res.data.list.forEach((item) => {
          nameList.push(item.name);
          moneyList.push(item.money);
          countList.push(item.count);
        });
        console.log(res.data, "库存总货量金额", nameList, moneyList, countList);
        this.$nextTick(() => {
          this.initEchart(nameList, moneyList, countList);
        });
      }
    },
    initEchart(nameList, moneyList, countList) {
      var chartDom = document.getElementById("TotalInventoryAmountcontentId");
      var myChart = echarts.init(chartDom);
      var option;

      var xData2 = nameList;
      var data1 = countList;
      var data2 = moneyList;
      var datasmall = data2.map((item, index) => {
        return parseInt(item - data1[index]);
      });
      var dataAdd = moneyList;

      option = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: (params) => {
            // console.log(params);
            var tipString =
              params[1].seriesName +
              " : " +
              params[1].value +'千件'+
              " <br/>" +
              params[3].seriesName +
              " : " +
              params[4].value +'万元'+
              " <br/>";
            return tipString;
          },
        },
        legend: {
          right: 10,
          top: -2,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "10%",
          top: "30%",
          right: "5%",
          bottom: "20%",
        },
        xAxis: {
          data: xData2,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 25,
            textStyle: {
              color: "rgba(255,255,255,0.7)",
              fontSize: 8,
            },
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          name: "货量/千件",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
            textStyle: {
              color: "#fff",
              fontSize: 8,
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,0.7)",
              fontSize: 8,
            },
            // 不显示Y轴数值
            // formatter: function() {
            //   return ''
            // }
          },
        },
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [41, 15],
            symbolOffset: [0, 10],
            z: 12,
            symbol: "circle",
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return new echarts.graphic.LinearGradient(
                  1,
                  // 深色#2BA9ED 浅色 #34EDF2
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(140, 186, 255, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(41, 116, 254, 1)", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
              // color: 'transparent'
            },
            data: [1, 2, 3, 4],
          },
          // 数据的柱状图1
          {
            name: "总货量",
            type: "bar",
            barWidth: 41,
            z: 1,
            stack: "Search Engine",
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    // 第一节下面
                    offset: 0,
                    color: "rgba(37, 114, 254, 0.9)",
                  },
                  {
                    offset: 1,
                    color: "rgba(107, 198, 255, 0.8)",
                  },
                ],
              },
            },
            data: data1,
          },
          // 数据顶部的样式
          {
            name: "",
            type: "pictorialBar",
            symbol: "circle",
            symbolSize: [41, 15],
            symbolOffset: [0, -8],
            z: 12,
            itemStyle: {
              normal: {
                opacity: 1,
                color: function (params) {
                  return new echarts.graphic.LinearGradient(
                    1,
                    // 深色#2BA9ED 浅色 #34EDF2
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: "rgba(140, 186, 255, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(41, 116, 254, 1)", // 100% 处的颜色
                      },
                    ],
                    false
                  );
                },
              },
            },
            symbolPosition: "end",
            data: data1,
          },
          // 数据的柱状图2
          {
            name: "总金额",
            type: "bar",
            z: 10,
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    // 第一节下面
                    offset: 0,
                    color: "rgba(60, 230, 218, 0.5)",
                  },
                  {
                    offset: 1,
                    color: "rgba(60, 230, 218, 0.5)",
                  },
                ],
              },
            },
            data: datasmall,
          },
          // 阴影的顶部
          {
            name: "", // 头部
            type: "pictorialBar",
            symbol: "circle",
            symbolSize: [41, 15],
            symbolOffset: [0, -8],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              normal: {
                opacity: 1,
                color: function (params) {
                  return new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: "rgba(68, 218, 145, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "rgba(235, 234, 92, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "rgba(235, 234, 92, 1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(68, 218, 145, 1)", // 100% 处的颜色
                      },
                    ],
                    false
                  );
                },
                label: {
                  show: true, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "#fff",
                    fontSize: 16,
                    top: 50,
                  },
                  formatter: function (param) {
                    return param.data + "W";
                  },
                },
              },
            },
            data: dataAdd,
          },
        ],
      };

      option && myChart.setOption(option);
      // tools.autoHover(myChart, option, 4, 2000);
    },
  },
};
</script>

<style scoped lang="scss">
.TotalInventoryAmountcontent {
  color: aliceblue;
  width: 100%;
  height: 100%;
  padding: 0.1563rem 0.0781rem 0.0781rem;
}
</style>
